<template>

  <div>
    <!-- 单选-->
    <div v-if="qType==0">
      <el-radio-group v-model="answer.content">
        <el-radio v-for="item in qItem" :key="item.prefix" :label="item.prefix">
          <span class="question-prefix">{{ item.prefix }}.</span>
          <span v-html="item.content" class="q-item-span-content"></span>
        </el-radio>
      </el-radio-group>
    </div>
    <div v-if="qType==1">
      <el-checkbox-group>
        <el-checkbox-group @change="changeL" v-model="answer.contentArray">
          <el-checkbox v-for="item in qItem" :label="item.prefix" :key="item.prefix">
            <span class="question-prefix">{{ item.prefix }}.</span>
            <span v-html="item.content" class="q-item-span-content"></span>
          </el-checkbox>
        </el-checkbox-group>
      </el-checkbox-group>
    </div>
    <!-- 判断-->
    <div v-if="qType==2">
      <el-radio-group v-model="answer.content">
        <el-radio v-for="item in qItem" :key="item.prefix" :label="item.prefix">
          <span v-html="item.content" class="q-item-span-content"></span>
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>


export default {
  name: "questionPage",
  props: {
    qType: {
      type: String
    },
    qItem: {
      type: Array
    },
    answer: {
      type: Object,
      default: function () {
        return {id: null, content: '', contentArray: [], doRight: false}
      }
    },
  },
  data() {
    return {
      ans: 0,
      contentArray: [],
      nedList: []
    }
  },
  created() {
    console.log(this.qItem,'1111')
  },
  methods: {
    changeL() {
      console.log(this.answer.contentArray, '选中')
      // eslint-disable-next-line vue/no-mutating-props
      this.answer.content = JSON.stringify(this.answer.contentArray)
      console.log(this.answer.content)
    }
  }
}
</script>


<style scoped lang="scss">

/deep/ .el-radio__original {
  display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
}

/deep/ .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

::v-deep .el-radio {
  display: block;
  margin-bottom: 10px;
}

::v-deep .el-checkbox {
  display: block;
}
</style>
